<template>
  <Temp title="挖填方分析">
    <template v-slot:title>
      <div class="temp-clear" @click="clear">
        <Icon
          title="清除"
          name="qingchu"
          color="#D2E6F0"
          font-size="20"
        />
        <span class="temp-clear-title"> 清除 </span>
      </div>
    </template>
    <div class="cut-fill">
      <el-form
        label-width="100px"
        label-position="left"
        :model="formData"
      >
        <el-form-item label="平整海拔(米)">
          <el-input
            size="small"
            v-model="formData.flatAltitude"
            placeholder="请输入平整海拔"
          />
        </el-form-item>
      </el-form>
      <div class="operation" @click="drawArea">
        <Icon
          class="icon"
          title="自定义"
          name="zidingyi"
          color="#ffffff"
          font-size="18"
        />
        <span>绘制范围</span>
      </div>
      <div class="output" v-if="showResult">
        <el-form
          label-width="110px"
          label-position="left"
          :model="formData"
        >
          <el-form-item label="最低海拔(米)：">
            <el-input
              size="small"
              disabled
              v-model="formData.lowestAltitude"
            />
          </el-form-item>
          <el-form-item label="最高海拔(米)：">
            <el-input
              size="small"
              disabled
              v-model="formData.highestAltitude"
            />
          </el-form-item>
          <el-form-item label="面积(平方米)：">
            <el-input
              size="small"
              disabled
              v-model="formData.area"
            />
          </el-form-item>
          <el-form-item label="挖方(立方米)：">
            <el-input
              size="small"
              disabled
              v-model="formData.cutVolume"
            />
          </el-form-item>
          <el-form-item label="填方(立方米)：">
            <el-input
              size="small"
              disabled
              v-model="formData.fillVolume"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="temp-close" @click="close"></div>
  </Temp>
</template>

<script>
import Temp from '@/components/utool/components/temp'
import Icon from '@/components/icon'
import { getAction } from '@/utils/helper'
import { Loading } from 'element-ui'

const cutFill = {}
let loadingInstance

export default {
  name: 'CutFill',
  components: {
    Temp,
    Icon
  },
  inject: ['viewerId'],
  data() {
    return {
      showResult: false,
      formData: {
        flatAltitude: '600',
        lowestAltitude: '',
        highestAltitude: '',
        area: '',
        cutVolume: '',
        fillVolume: ''
      }
    }
  },
  watch: {
    formData: {
      handler(val) {
        this.showResult =
          val.lowestAltitude ||
          val.highestAltitude ||
          val.area ||
          val.cutVolume ||
          val.fillVolume
      },
      deep: true
    }
  },
  async created() {
    const { toolManager } = await getAction(this.viewerId)
    cutFill[this.viewerId] = toolManager.cutFill
  },
  beforeDestroy() {
    cutFill[this.viewerId] && cutFill[this.viewerId].clear()
  },
  methods: {
    close() {
      this.$emit('close')
      this.clear()
    },
    // 绘制区域
    drawArea() {
      if (this.formData.flatAltitude) {
        cutFill[this.viewerId].drawArea(
          this,
          this.formData.flatAltitude
        )
      } else {
        this.showMessage('error', '请输入平整海拔')
      }
    },
    clear() {
      cutFill[this.viewerId].clear()
    },
    reset() {
      Object.assign(this.formData, {
        lowestAltitude: '',
        highestAltitude: '',
        area: '',
        cutVolume: '',
        fillVolume: ''
      })
    },
    showMessage(type, message) {
      this.$message({ type: type, message: message })
    },
    showLoading() {
      if (!loadingInstance) {
        loadingInstance = Loading.service({
          fullscreen: true
        })
      }
    },
    hideLoading() {
      if (loadingInstance) {
        this.$nextTick(() => {
          loadingInstance.close()
          loadingInstance = null
        })
      }
    },
    result(params) {
      console.log('计算结果')
      this.formData.lowestAltitude = params.lowestAltitude
      this.formData.highestAltitude = params.highestAltitude
      this.formData.area = params.area
      this.formData.cutVolume = params.cutVolume
      this.formData.fillVolume = params.fillVolume
      console.log(this.formData)
    }
  }
}
</script>

<style scoped lang="scss">
.temp-clear {
  display: flex;
  align-items: center;

  &-title {
    margin-left: 2px;
    font-size: 14px;
    word-break: keep-all;
    cursor: pointer;
    font-weight: 400;
  }
}

.cut-fill {
  width: 300px;
  display: flex;
  flex-direction: column;
  background-color: rgba(25, 59, 81, 1);
  padding: 18px 18px 26px 18px;

  .operation {
    width: 100%;
    height: 30px;
    background: #0c87a8;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    & span {
      margin-left: 2px;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .output {
    padding-top: 0;
    margin-top: 20px;
    border-top: solid 1px white;

    .el-form-item:last-of-type {
      margin-bottom: 0;
    }

    ::v-deep {
      .el-form {
        &-item {
          margin-bottom: 20px;

          &__label {
            color: #d2e6f0;
          }

          &__content {
            .el-input {
              &__inner {
                padding: 0;
                background-color: rgba(25, 59, 81, 1);
                border: none;
                color: white;
              }
            }
          }
        }
      }
    }
  }

  ::v-deep {
    .el-form {
      &-item {
        margin-bottom: 20px;

        &__label {
          color: #d2e6f0;
        }

        &__content {
          .el-input {
            &__inner {
              background-color: rgba(255, 255, 255, 0.2);
              border-color: rgba(255, 255, 255, 0.3);
              color: white;
            }
          }
        }
      }
    }
  }
}

.temp-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background-color: red;
  border-radius: 50%;
  cursor: pointer;

  &::after,
  &::before {
    content: '';
    width: 50%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
  }

  &::before {
    transform: translateX(-50%) translateY(-50%)
      rotateZ(45deg);
  }

  &::after {
    transform: translateX(-50%) translateY(-50%)
      rotateZ(-45deg);
  }
}
</style>
